import './index.css'
import { useDispatch } from 'react-redux'
import {deleteTodoAction, toggleTodoAction} from '../../redux/todos'

/* 
列表项组件
根据接收的todo显示列表项界面
 */
export default function Item({todo}) {
  
  const dispatch = useDispatch()

  return (
    <li>
      <label>
        <input type="checkbox" checked={todo.complete} 
          onChange={() => dispatch(toggleTodoAction(todo.id))}/>
        <span>{todo.title}</span>
      </label>
      <button className="btn btn-danger" onClick={() => dispatch(deleteTodoAction(todo.id))}>删除</button>
    </li>
  )
}